<template>
  <div class="zw-table">
    <el-table class="table-box" :height="tabH" :style="{ width: '100%', height: tabH }" :data="list" stripe>
      <slot />
    </el-table>
    <el-pagination background layout="total, prev, pager, next, sizes" v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]" :total="total" @current-change="onGetData()" @size-change="onGetData()" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue'
  import { tableH, reSize } from '@/utils/utils'
  const tabH = ref(400)
  interface Props {
    searchKeys: any
    func: any
  }
  // 表格的自适应高度
  const getTableH = () => {
    tabH.value = tableH('.table-box')
    console.log(1111, tabH.value)
  }
  const props = withDefaults(defineProps<Props>(), {
    searchKeys: {},
    func: undefined
  })

  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(0)
  const list = ref([])

  watch(
    () => props.searchKeys,
    (depart) => {
      currentPage.value = 1
      onGetData()
    }
  )

  const onGetData = () => {
    let param = {
      page: currentPage.value,
      limit: pageSize.value
    }

    Object.assign(param, props.searchKeys)

    if (Object.prototype.toString.call(props.func) === '[object Function]') {
      props.func(param).then((res: any) => {
        list.value = res.data || []
        total.value = res.total || 0
      })
    }
    if (Object.prototype.toString.call(props.func) === '[object Promise]') {
      props.func.then((fun: any) => {
        fun(param).then((res: any) => {
          list.value = res.data || []
          total.value = res.total || 0
        })
      })
    }
  }

  onGetData()
  onMounted(() => {
    getTableH()
    reSize(getTableH)
  })
</script>

<style lang="scss">
  .zw-table {
    .el-table {
      .el-table__header-wrapper {
        .el-table__header {
          thead {
            tr {
              th {
                background-color: #f9f9f9;
              }
            }
          }
        }
      }
      .el-table__body-wrapper {
      }
    }
    .el-pagination {
      padding: 0;
      margin-top: 10px;
      text-align: right;

      .el-pagination__sizes {
        margin-right: 0;
      }
    }

    .contain-img {
      display: flex;
      align-items: center;

      .img-box {
        width: 36px;
        height: 34px;
        margin-right: 10px;

        .el-icon {
          font-size: 36px;
        }
      }
    }
  }
</style>
